<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="1200px" :close-on-click-modal="true" @close="close">
    <div class>
      <el-form :inline="true" :model="formInline" label-width="100px">
        <el-form-item label="手机号/真实姓名/用户昵称" style="width: 100%;" label-width="200px">
          <el-input v-model="formInline.keyword" size="medium" placeholder="手机号/真实姓名/用户昵称" @input="onSearch"></el-input>
        </el-form-item>
        <el-form-item label="标签名称">
          <el-select v-model="formInline.vipLabel" placeholder="请选择" @change="onSearch">
            <el-option v-for="item in labelOptions" :key="item.id" :label="item.labelName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源渠道" class="mar_l20">
          <el-select v-model="formInline.userChannel" placeholder="请选择" @change="onSearch">
            <el-option v-for="item in lyOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户身份" class="mar_l20">
          <el-select v-model="formInline.isBlack" placeholder="请选择" @change="onSearch">
            <el-option v-for="item in SfOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户注册时间">
          <el-date-picker v-model="formInline.timeData" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" stripe style="width: 100%" @selection-change="setSelectRows">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="portrait" label="用户信息" width="300">
          <template slot-scope="scope">
            <div class="flex flex-y-top">
              <div class>
                <img class="goodlogo bor_rad50" :src="scope.row.portrait" />
              </div>
              <div class="mar_l10">
                <div class="flex">
                  <div class>{{scope.row.userName}}</div>
                  <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.id}}）</el-tag>
                </div>
                <p class="fon_12 color_9 mar_t5">来源：微信小程序</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userTel" label="手机号"></el-table-column>
        <el-table-column prop="createdAt" label="注册时间"></el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="medium" @click="close">取 消</el-button>
      <el-button size="medium" type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { setMemberList, selectUser, getMemberLabel } from '@/api/user';

export default {
  name: 'labelSave',
  created() {},
  data() {
    return {
      formInline: {
        keyword: '',
        vipLabel: '',
        isBlack: '',
        userChannel: '',
        timeData: ''
      },
      SfOptions: [
        {
          value: '1',
          label: '拉黑用户'
        }
      ],
      lyOptions: [
        {
          value: '1',
          label: '微信小程序'
        }
      ],
      title: '',
      dialogFormVisible: false,
      list: [],
      selectRows: '',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      labelOptions: [],
      storeIds: []
    };
  },
  components: {},
  methods: {
    async init() {
      let startTime = '';
      let endTime = '';
      if (this.formInline.timeData) {
        startTime = changeDate(this.formInline.timeData[0]);
        endTime = changeDate(this.formInline.timeData[1]);
      }
      var params = {
        page: this.page.currentPage,
        keyword: this.formInline.keyword,
        vipLabel: this.formInline.vipLabel,
        isBlack: this.formInline.isBlack,
        userChannel: this.formInline.userChannel,
        idArr: this.storeIds,
        startTime,
        endTime
      };
      const { data, count } = await setMemberList(params);
      this.list = data;
      this.page.total = count;
    },
    onSearch() {
      this.init();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.init();
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    search() {
      this.init();
    },
    showEdit(row) {
      getMemberLabel().then((res) => {
        if (res.code == 1) {
          this.labelOptions = res.data;
        }
      });
      if (!row) {
        this.title = '选择用户';
        this.init();
      } else {
        this.storeIds = row;
        this.title = '编辑用户';
        this.init();
      }
      this.dialogFormVisible = true;
    },
    close() {
      this.dialogFormVisible = false;
    },
    async save() {
      if (this.selectRows.length) {
        const id = this.selectRows.map((item) => item.id);
        if (this.storeIds) {
          var idArr = id.concat(this.storeIds);
        }
        const { msg, data } = await selectUser({ idArr });
        this.$emit('fetchData', data);
        this.close();
      } else {
        this.$baseMessage('未选中任何用户', 'error');
        return false;
      }
    }
  }
};
</script>
<style lang="scss">
.el-dialog {
  border-radius: 5px;
}
.el-input-number {
  width: auto;
  height: 40px;
  line-height: 40px;
}
.el-dialog__header {
  border-bottom: 1px solid #eee;
}
.el-dialog__footer {
  border-top: 1px solid #eee;
}
</style>
